<template>
	<view class="titles">
		<view class="tops">
			<text class="tops-name">{{cinemaModel.filmName }}</text>
			<text class="tops-source">{{cinemaModel.score }}</text>
		</view>
		<view class="bottoms">
			<view class="bottoms-flex">
				<text class="bottoms-txt">{{cinemaModel.duration}} 分钟</text>
				<u-line direction="col" color="#999999" length="26rpx"></u-line>
				<text class="bottoms-txt">{{cinemaModel.filmTypes}} 分钟</text>
				<u-line direction="col" color="#999999" length="26rpx"></u-line>
				<text  class="bottoms-txt">{{ cinemaModel.actor }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			cinemaModel: {
				type: Object,
				default: () => {}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.titles {
		margin-top: 30rpx;
		.tops {
			@include flexCenterCenter;
			&-name {
				@include font(32rpx, #333333, bold);
			}
			&-source {
				margin-left: 10rpx;
				@include font(30rpx, #FF8600, bold);
			}
		}
		.bottoms {
			margin-top: 15rpx;
			@include font(26rpx, #999999);
			&-flex {
				@include flexCenterCenter;
				flex-wrap: wrap;
				text-align: center;
				padding: 0 60rpx;
				line-height: 40rpx;
			}
			&-txt {
				padding: 0 10rpx;
			}
		}
		
	}
</style>